<template>
	<div>
		<!-- <h1>收藏和赞</h1> -->
		<div class="collection">
			<div class="coll">
				<div class="iconfont icon-fanhuipt" @click="$router.push('/userInfo')"></div>
				<p>收藏和赞</p>
			</div>

			<div class="collContent">
				<van-tabs v-model="active" animated>
					<van-tab :title="'歌手'">
						<div class="container">
							<ul>
								<li v-for="item in subList" :key="item.id"
									@click="$router.push('/singer/artists?id=' + item.id)">
									<div class="img">
										<img :src="item.picUrl" />
									</div>

									<div class="font">
										<h3>{{ item.name }}</h3>
										<p>{{ item.trans || item.alias[0] }}</p>
									</div>
								</li>
							</ul>
						</div>
					</van-tab>

					<van-tab :title="'MV'">
						<div class="container">
							<ul>
								<li v-for="item in mvSubList" :key="item.vid"
									@click="$router.push('/mvplay/mvplay?id=' + item.vid)">
									<div class="img">
										<img :src="item.coverUrl" />
									</div>

									<div class="font">
										<h3>{{ item.title }}</h3>
										<p>{{ item.creator[0].userName }}</p>
									</div>
								</li>
							</ul>
						</div>
					</van-tab>
				</van-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getSublist,
		getMVSublist
	} from "../../api/myself";
	export default {
		data() {
			return {
				active: 0,
				subList: null,
				mvSubList: null,
			};
		},
		created() {
			this.$emit("getnavs-btn", false);
			getSublist().then((data) => {
				console.log(data);
				this.subList = data.data;
			});
			getMVSublist().then((data) => {
				console.log(data);
				this.mvSubList = data.data;
			});
		},
	};
</script>

<style lang="less">
	.van-tabs__line{
		background-color: #243DE2;
	}
	.collection {
		width: 100%;

		.coll {
			width: 100%;
			min-height: 30px;
			line-height: 30px;
			font-size: 20px;
			background-color: #0F172A;
			color: #fff;
			text-align: center;
			display: flex;
			padding: 8px 0px;
			box-sizing: border-box;
			text-align: center;

			.iconfont {
				flex: 0 0 30px;
			}

			p {
				flex: 1;
				padding-right: 30px;
				text-align: center;
			}
		}

		.container {
			ul {
				padding: 15px;

				li {
					display: flex;
					margin-bottom: 20px;

					.img {
						flex: 0 0 40px;
						width: 80px;
						height: 80px;
						border-radius: 50%;
						padding-right: 10px;

						img {
							width: 80px;
							height: 80px;
							border-radius: 50%;
						}
					}

					.font {
						flex: 1;

						h3 {
							color: #333;
							font-size: 18px;
							padding-bottom: 8px;
							padding-top: 10px;
						}

						p {
							font-size: 13px;
							color: #aaa;
							display: -webkit-box;
							// 3、弹性盒子排列方式：垂直排列：
							-webkit-box-orient: vertical;
							// 4、规定显示几行文本：
							-webkit-line-clamp: 1;
							// 5、溢出隐藏：
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
